import React from 'react'
import Image from 'next/image'
import { products } from '@/data'

export default  function Page({ params }: { params: { id: string }}){
  const id =Number(params.id)
  const product = products.find(item => item.id === id)!
  return (
    <div className="container mx-auto pt-8">
      <Image 
        src={product.imageSrc}
        alt={product.imageAlt}
        width={350}
        height={350}
        className="rounded-2xl mx-auto"
      />
      <div className="border-2 border-dashed rounded-2xl p-3 mx-50 mt-4 leading-6">
        <p>
          <strong>Title:</strong>{product.imageAlt}
        </p>
        <p>
          <strong>Price:</strong>{product.price}
        </p>
        <p>
          <strong>Desc:</strong>Since Next.js does not have access to remote files during the build process,
            you&apos;ll need to provide the width, height and optional blurDataURL props manually. 
            The width and height are used to infer the correct aspect ratio of image and avoid
            layout shift from the image loading in. Alternatively, you can use the fill property
            to make the image fill the size of the parent element.
        </p>
      </div>
    </div>
  )
}
